<template>
  <div class="wBd">
    <div class="contArticle">
      <!-- 标题 -->
      <div class="contArticle_tit">
        <h2>{{ policyById.policyTitle }}</h2>
      </div>
      <div class="contArticle_author">
        <span>{{ policyById.createTime }}</span>
        <span>来源：{{ policyById.createBy }}</span>
        <span>（浏览量：{{ policyById.click }}）</span>
      </div>
      <!-- 正文 -->
      <div class="contArticle_text">
        <div id="fontzoom" >
          <div class="qudiaoBorder">
            <div class="ql-editor" v-html="policyById.policyContent"></div>
          </div>
        </div>
<!--        <div style="text-indent: 2rem;" id="fontzoom" v-html="policyById.policyContent"></div>
        <div v-if="policyById.img.length>0" v-for="(item,index) in policyById.img" :key="index">
&lt;!&ndash;          <img style="width: 100%;text-align: center;height: 100%" :src="item.url">&ndash;&gt;
          <img style="width: 100%;text-align: center;height: 100%" :src="changeUrl(item.fileName)">
        </div>-->
      </div>
      <div style="border-top: 1px dotted #ccc;margin-top: 20px;background: none;"></div>
      <div class="contArticle_bot_page">
        <div class="cA_b_prew">
          <span style="color:red">上一篇：</span>
          <a @click="btnClick(upPolicy)" v-if="upPolicy!=='已是首条'" href="javascript:;"
             :title="'标题：'+upPolicy.policyTitle+'\n'+'浏览量：'+upPolicy.click+'\n'+'发表时间：'+upPolicy.createTime"
          >{{ vague('3', upPolicy.policyTitle) }}
            <span style="color: #666;padding-left: 10px;">[ {{ parseTime(upPolicy.createTime, '{m}-{d}') }} ]</span>
          </a>
          <span style="color: red" v-else>{{ upPolicy }}</span>
        </div>
        <div class="cA_b_next">
          <span style="color:red">下一篇：</span>
          <a @click="btnClick(nextPolicy)" v-if="nextPolicy!=='已是尾条'" href="javascript:;"
             :title="'标题：'+nextPolicy.policyTitle+'\n'+'浏览量：'+nextPolicy.click+'\n'+'发表时间：'+nextPolicy.createTime"
          >{{ vague('3', nextPolicy.policyTitle) }}
            <span style="color: #666;padding-left: 10px;">[ {{ parseTime(nextPolicy.createTime, '{m}-{d}') }} ]</span>
          </a>
          <span style="color: red" v-else>{{ nextPolicy }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUpPolicy, getNextPolicy, getPolicy, updateClickPolicy } from '@/api/policy'

export default {
  name: 'Edit',
  inject: ['reloadMain'],  //注入依赖
  data() {
    return {
      policyList: [], // 政策法规数据
      policyById: {}, //单条政策法规
      upPolicy: '已是首条',//上一条政策法规
      nextPolicy: '已是尾条'  //下一条政策法规
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  created() {
    this.getList(this.id)
  },
  methods: {
    getList(id) {
      getUpPolicy(id).then(response => {
        if (response.data) {
          this.upPolicy = response.data
        } else {
          this.upPolicy = '已是首条'
        }
      })
      getNextPolicy(id).then(response => {
        if (response.data) {
          this.nextPolicy = response.data
        } else {
          this.nextPolicy = '已是尾条'
        }
      })
      getPolicy(id).then(response => {
        this.policyById = response.data
        // this.policyById.img = this.change(this.policyById.img)
      })
    },
    btnClick(data) {
      updateClickPolicy(data)
      this.$router.push({
        path: '/policy/list/edit',
        query: {
          id: data.policyId
        }
      })
      this.reloadMain()
    }
  }
}
</script>

<style scoped>
.qudiaoBorder .ql-container.ql-snow {
  border: none;
}

.qudiaoBorder .ql-editor {
  overflow: hidden;
  padding: 0;
}
</style>
